<template>
    <div class="rank-layer">

        <div class="rank-content">
          <h5 class="rank-title">
            <i class="ib img-gold-cup"></i>
            <span class="rank-title-text">Vii排行榜</span>
          </h5>

          <ul class="rank-list">
            <li v-for="(item,index) in rankList" :class="{'user-active' : index == 0}">
              <div class="fx-row fx-row-center">
                <i v-if="item.rank <=3 " class="" :class="{'img-copper-medal' : item.rank == 3, 'img-silver-medal' : item.rank == 2 ,'img-gold-medal' : item.rank == 1}"></i>
                <span v-if="item.rank > 3 " class="">{{item.rank}}</span>
                  <span class="bg-img-clip ml15 user-head" :style="{'backgroundImage':`url(${item.userIcon})`}">
                </span>
                <h4 class="ml15 user-text">{{item.userName}}</h4>
                <div class="fx text-right">

                  <div class="ib text-center">
                      <div class="text-primary">
                        <i class="user-text iconfont icon-goldMyself-copy" style="font-size:19px;"></i>
                      </div>
                      <div class="user-text text-primary" style="font-size : 13px;">
                        {{getMin(item.totalTime)}}分钟
                      </div>
                  </div>

                </div>
              </div>
            </li>
          </ul>
        </div>
    </div>
</template>
<style lang="scss">
  .rank-title{
    padding: 18px 0;
    text-align: center;
    font-size: 17px;


    .rank-title-text{
      position: relative;
      top: 3px;
      margin-left: 10px;
    }
  }

  .user-head{
    width: 46px;
    height: 46px;
    border-radius: 50%;
  }
  .rank-layer{
    padding: 20px 15px;
  }
  .rank-content{
    background: #fff;
    border-radius: 5px;
  }


  .rank-list{
    &>li{
        padding: 13px 10px;
        border-bottom: 1px solid #D8D8D8;

      &.user-active{
        background: #7EDC8D;

        .user-text{
          color: #fff;
        }

      }


    }
  }

</style>
<script>
    import Util from "util";
    import API  from "api";

    export default{
        data(){
            return{
                rankList : []
            }
        },

        mounted : function(){
          API.biz.getUserRank()
            .then((res)=>{
                  this.rankList  = res.bizData;
              });
        },

        methods : {
          getMin : function(sec){
              return parseInt(sec / 60);
          }
        },
        components:{
        }
    }
</script>
